<template>
  <div>
    <!-- Card -->
    <el-card class="box-card">
      <template #header class="clearfix">
        <span>{{isEntry?'试题录入':'试题修改'}}</span>
      </template>
      <!-- 表单域 -->
      <el-form :model="entryTestForm" :rules="entryTestFormRules" ref="entryTestFormRef" label-width="100px">
        <el-form-item label="学科：" prop="subjectID">
          <el-col :span="7">
            <el-select v-model="entryTestForm.subjectID" @change="getCataAndTags" placeholder="请选择">
              <el-option v-for="(item,index) in subjectList" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="目录：" prop="catalogID">
          <el-col :span="7">
            <el-select v-model="entryTestForm.catalogID" placeholder="请选择">
              <el-option v-for="(item,index) in catalogList" :key="index" :label="item.directoryName" :value="item.id"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="企业：" prop="enterpriseID">
          <el-col :span="7">
            <el-select v-model="entryTestForm.enterpriseID" placeholder="请选择">
              <el-option v-for="(item,index) in companyList" :key="index" :label="item.company" :value="item.id"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="城市：" prop="province" required>
          <el-form-item prop="city">
            <el-col :span="7">
              <city-select :province="entryTestForm.province" :city="entryTestForm.city" @selected="onChange"></city-select>
            </el-col>
          </el-form-item>
        </el-form-item>
        <el-form-item label="方向：" prop="direction">
          <el-col :span="7">
            <el-select v-model="entryTestForm.direction" placeholder="请选择">
              <el-option v-for="(item,index) in directionList" :key="index" :label="item.direction" :value="item.id"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="题型：" prop="questionType">
          <el-col :span="7">
            <el-radio-group v-model="entryTestForm.questionType">
              <el-radio label="1">单选题</el-radio>
              <el-radio label="2">多选题</el-radio>
              <el-radio label="3">简答题</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item label="难度：" prop="difficulty">
          <el-col :span="7">
            <el-radio-group v-model="entryTestForm.difficulty">
              <el-radio label="1">简单</el-radio>
              <el-radio label="2">一般</el-radio>
              <el-radio label="3">困难</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item label="题干：" prop="question">
          <quill-editor class="e-quill-editor" v-model="entryTestForm.question"></quill-editor>
        </el-form-item>
        <el-form-item label="选项：" prop="options" v-show="entryTestForm.questionType!=='3'">
          <!-- 单选选择框 -->
          <radio-box v-if="entryTestForm.questionType==='1'" :options="entryTestForm.options" @changed="entryTestForm.options = $event"></radio-box>
          <!-- 多选框 -->
          <check-box v-else-if="entryTestForm.questionType==='2'" :options="entryTestForm.options" @changed="entryTestForm.options = $event"></check-box>
          <!-- 添加按钮 -->
          <el-row>
            <el-button type="danger" @click="addOption" :disabled="isDisabled">添加选项与答案</el-button>
          </el-row>
        </el-form-item>
        <el-form-item label="解析视频：" prop="videoURL">
          <el-col :span="7">
            <el-input v-model="entryTestForm.videoURL"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="答案解析：" prop="answer">
          <quill-editor class="e-quill-editor" v-model="entryTestForm.answer"></quill-editor>
        </el-form-item>
        <el-form-item label="题目备注：" prop="remarks">
          <el-col :span="7">
            <el-input
              type="textarea"
              :rows="2"
              v-model="entryTestForm.remarks">
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="试题标签：" prop="tags">
          <el-col :span="7">
            <el-select v-model="entryTestForm.tags" multiple placeholder="请选择">
              <el-option v-for="(item,index) in tagsList" :key="index" :label="item.tagName" :value="item.id"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button v-if="isEntry" type="primary" @click="onEntrySubmit">确认提交</el-button>
          <el-button v-else type="success" @click="onEditSubmit">确认修改</el-button>
        </el-form-item>
      </el-form>
      <!-- 表单域   END -->
    </el-card>
    <!-- Card   END -->
  </div>
</template>

<script>

import CitySelect from '@/components/basemanagement/city-select'
import RadioBox from '@/components/basemanagement/radio-box'
import CheckBox from '@/components/basemanagement/check-box'
import { getSubjectList, getCompanyList, getCatalogList, getTagsList, getDirectionList, entryQues, getQues, editQues } from '@/assets/api/subject/subject'

export default {
  components: {
    CitySelect,
    RadioBox,
    CheckBox
  },
  data () {
    return {
      entryTestForm: {
        id: '',
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '',
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        question: '', // 题干
        options: [
          {
            code: 'A',
            title: '',
            img: '',
            isRight: true
          },
          {
            code: 'B',
            title: '',
            img: '',
            isRight: false
          },
          {
            code: 'C',
            title: '',
            img: '',
            isRight: false
          },
          {
            code: 'D',
            title: '',
            img: '',
            isRight: false
          }
        ],
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '', // 试题标签
      },
      entryTestFormRules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'blur' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'blur' }],
        enterpriseID: [{ required: true, message: '请选择企业', trigger: 'blur' }],
        direction: [{ required: true, message: '请选择方向', trigger: 'blur' }],
        questionType: [{ required: true, message: '请选择题型', trigger: 'blur' }],
        difficulty: [{ required: true, message: '请选择难度', trigger: 'blur' }],
        question: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        answer: [{ required: true, message: '请输入答案解析', trigger: 'blur' }],
      },
      subjectList: [],
      companyList: [],
      directionList: [],
      catalogList: [],
      tagsList: [],
      // 添加按钮备选项
      codeArr: ['E', 'F', 'G', 'H'],
      addOptionDisabled: false
    }
  },
  created: function () {
    // 获取学科列表
    this.getSubjectList()
    // 获取企业列表
    this.getCompanyList()
    // 获取方向列表
    this.getDirectionList()
    if (!this.isEntry) {
      // 修改页面初始化
      this.getQues()
      this.getCataAndTags(this.entryTestForm.subjectID)
    }
  },
  methods: {
    // 获取试题列表
    async getQues () {
      try {
        const { data } = await getQues(this.$route.query.id)
        if (!Array.isArray(data.tags)) {
          data.tags = data.tags.split(',')
        }
        this.entryTestForm = data
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 获取学科列表
    async getSubjectList () {
      try {
        const { data } = await getSubjectList()
        this.subjectList = data
      } catch (err) {
        this.$message({
          message: '获取列表失败',
          type: 'warning'
        })
      }
    },
    // 获取企业列表
    async getCompanyList () {
      try {
        const { data } = await getCompanyList()
        this.companyList = data.items
      } catch (err) {
        this.$message({
          message: '获取企业列表失败',
          type: 'warning'
        })
      }
    },
    // 获取方向列表
    async getDirectionList () {
      try {
        const { data } = await getDirectionList()
        this.directionList = data.items
      } catch (err) {
        this.$message({
          message: '获取方向列表失败',
          type: 'warning'
        })
      }
    },
    // 获取目录与标签列表
    getCataAndTags (id) {
      this.getCatalogList(id)
      this.getTagsList(id)
    },
    async getCatalogList (id) {
      try {
        const { data } = await getCatalogList(id)
        this.catalogList = data.items
      } catch (err) {
        this.$message({
          message: '获取目录列表失败',
          type: 'warning'
        })
      }
    },
    async getTagsList (id) {
      try {
        const { data } = await getTagsList(id)
        this.tagsList = data.items
      } catch (err) {
        this.$message({
          message: '获取标签列表失败',
          type: 'warning'
        })
      }
    },
    // 修改城市
    onChange (arr) {
      this.entryTestForm.province = arr[0]
      this.entryTestForm.city = arr[1]
    },
    // 增加选项
    addOption() {
      const index = this.entryTestForm.options.length - this.codeArr.length
      if (this.codeArr[index]) {
        this.entryTestForm.options.push({
          code: this.codeArr[index],
          title: '',
          img: '',
          isRight: false
        })
      } else {
        this.addOptionDisabled = true
        this.$message.warning('不能再增加选项了');
      }
    },
    // 录入提交按钮
    async onEntrySubmit () {
      this.$refs.entryTestFormRef.validate(async (valid) => {
        if (!valid) {
          return
        }
        this.entryTestForm.tags = this.entryTestForm.tags.join(',')
        this.entryTestForm.direction = '' + this.entryTestForm.direction
        try {
          await entryQues(this.entryTestForm)
          this.$message.success('提交成功！')
        } catch (error) {
          this.$message.error(error)
        }
      })
    },
    // 修改提交按钮
    onEditSubmit () {
      this.$refs.entryTestFormRef.validate(async (valid) => {
        if (!valid) {
          return
        }
        this.entryTestForm.tags = this.entryTestForm.tags.join(',')
        this.entryTestForm.direction = '' + this.entryTestForm.direction
        try {
          await editQues(this.$route.query.id, this.entryTestForm)
          this.$message.success('修改成功！')
        } catch (error) {
          this.$message.error(error)
        }
      })
    }
  },
  computed: {
    isEntry: function () {
      if (this.$route.query.id === undefined && this.$refs.entryTestFormRef) {
        this.$refs.entryTestFormRef.resetFields()
      }
      return this.$route.query.id === undefined
    },
    isDisabled () {
      return this.addOptionDisabled || this.entryTestForm.questionType !== '2'
    }
  }
}
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.el-col-7>div {
  width: 100%;
}
</style>
